//package com.example.compose
//
//import androidx.compose.animation.AnimatedContent
//import androidx.compose.animation.AnimatedVisibility
//import androidx.compose.animation.AnimatedVisibilityScope
//import androidx.compose.animation.ExperimentalSharedTransitionApi
//import androidx.compose.animation.SharedTransitionLayout
//import androidx.compose.animation.SharedTransitionScope
//import androidx.compose.foundation.Image
//import androidx.compose.foundation.background
//import androidx.compose.foundation.border
//import androidx.compose.foundation.clickable
//import androidx.compose.foundation.layout.Box
//import androidx.compose.foundation.layout.Column
//import androidx.compose.foundation.layout.Row
//import androidx.compose.foundation.layout.fillMaxSize
//import androidx.compose.foundation.layout.offset
//import androidx.compose.foundation.layout.padding
//import androidx.compose.foundation.layout.size
//import androidx.compose.foundation.shape.CircleShape
//import androidx.compose.foundation.shape.RoundedCornerShape
//import androidx.compose.material3.Text
//import androidx.compose.runtime.Composable
//import androidx.compose.runtime.getValue
//import androidx.compose.runtime.mutableStateOf
//import androidx.compose.runtime.remember
//import androidx.compose.runtime.setValue
//import androidx.compose.ui.Modifier
//import androidx.compose.ui.draw.alpha
//import androidx.compose.ui.draw.clip
//import androidx.compose.ui.graphics.Color
//import androidx.compose.ui.layout.ContentScale
//import androidx.compose.ui.res.painterResource
//import androidx.compose.ui.tooling.preview.Preview
//import androidx.compose.ui.unit.dp
//import androidx.compose.ui.unit.sp
//
//
//private class SharedElementBasicUsage2 {
//
//    @Preview
//    @Composable
//    fun SharedElementApp() {
//        var showDetail by remember {
//            mutableStateOf(false)
//        }
//        AnimatedContent(targetState = showDetail, label = "basic_transition") { targetState ->
//            if (!targetState) {
//                MainContent(
//                    onShowDetails = { showDetail = true },
//                )
//            } else {
//                DetailsContent(
//                    onBack = { showDetail = false },
//                )
//            }
//        }
//    }
//
//    @Composable
//    private fun MainContent(
//        onShowDetails: () -> Unit,
//    ) {
//        Row(
//            modifier = Modifier
//                .padding(8.dp)
//                .border(
//                    width = 1.dp,
//                    color = Color.Gray.copy(alpha = 0.5f),
//                    shape = RoundedCornerShape(8.dp)
//                )
//                .background(color = Color.LightGray, shape = RoundedCornerShape(8.dp))
//                .clickable {
//                    onShowDetails()
//                }
//                .padding(8.dp)
//        ) {
//            Image(
//                painter = painterResource(id = R.drawable.bella),
//                contentDescription = "bella",
//                modifier = Modifier
//                    .size(100.dp)
//                    .clip(CircleShape),
//                contentScale = ContentScale.Crop
//            )
//            Text(text = "Bella", fontSize = 21.sp)
//        }
//    }
//
//    @OptIn(ExperimentalSharedTransitionApi::class)
//    @Composable
//    private fun DetailsContent(
//        modifier: Modifier = Modifier,
//        onBack: () -> Unit,
//    ) {
//        Column(
//            modifier = Modifier
//                .padding(top = 200.dp, start = 16.dp, end = 16.dp)
//                .border(
//                    width = 1.dp,
//                    color = Color.Gray.copy(alpha = 0.5f),
//                    shape = RoundedCornerShape(8.dp)
//                )
//                .background(color = Color.LightGray, shape = RoundedCornerShape(8.dp))
//                .clickable {
//                    onBack()
//                }
//                .padding(8.dp)
//        ) {
//            Image(
//                painter = painterResource(id = R.drawable.bella),
//                contentDescription = "bella",
//                modifier = Modifier
//                    .size(200.dp)
//                    .clip(CircleShape),
//                contentScale = ContentScale.Crop
//            )
//            Text(text = "Bella", fontSize = 28.sp)
//            Text(
//                text = "转向新技术既困难又复杂, 而从最新技术重新开始则很容易. 这(据我观察)也是为什么稳定的大公司不会将其长期使用的应用程序迁移到新技术的最大原因之一, 除非它能带来惊人的利润.\n" +
//                        "你会发现大多数初创公司都在使用 Flutter, 这是因为 90% 以上的跨平台应用程序新创意都可以在Flutter中以经济高效的方式轻松实现. Flutter中的一切都非常快速, 令人惊叹, 而且具有我们在过去几年的Flutter之旅中听说过的所有令人惊叹的优点.\n" +
//                        "\n" +
//                        "作者：bytebeats\n" +
//                        "链接：https://juejin.cn/post/7299731886498349107\n" +
//                        "来源：稀土掘金\n" +
//                        "著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"
//            )
//        }
//    }
//}
//
//private class SharedElementBasicUsage3 {
//
//    @OptIn(ExperimentalSharedTransitionApi::class)
//    @Preview
//    @Composable
//    fun SharedElementApp() {
//        var showDetail by remember {
//            mutableStateOf(false)
//        }
//        SharedTransitionLayout {
//            AnimatedContent(targetState = showDetail, label = "basic_transition") { targetState ->
//                if (!targetState) {
//                    MainContent(
//                        onShowDetails = { showDetail = true },
//                        sharedTransitionScope = this@SharedTransitionLayout,
//                        animatedVisibilityScope = this@AnimatedContent
//                    )
//                } else {
//                    DetailsContent(
//                        onBack = { showDetail = false },
//                        sharedTransitionScope = this@SharedTransitionLayout,
//                        animatedVisibilityScope = this@AnimatedContent
//                    )
//                }
//            }
//        }
//    }
//
//    @OptIn(ExperimentalSharedTransitionApi::class)
//    @Composable
//    private fun MainContent(
//        onShowDetails: () -> Unit,
//        modifier: Modifier = Modifier,
//        sharedTransitionScope: SharedTransitionScope,
//        animatedVisibilityScope: AnimatedVisibilityScope
//    ) {
//        Row(
//            modifier = Modifier
//                .padding(8.dp)
//                .border(
//                    width = 1.dp,
//                    color = Color.Gray.copy(alpha = 0.5f),
//                    shape = RoundedCornerShape(8.dp)
//                )
//                .background(color = Color.LightGray, shape = RoundedCornerShape(8.dp))
//                .clickable {
//                    onShowDetails()
//                }
//                .padding(8.dp)
//        ) {
//            with(sharedTransitionScope) {
//                Image(
//                    painter = painterResource(id = R.drawable.bella),
//                    contentDescription = "bella",
//                    modifier = Modifier
//                        .sharedElement(
//                            rememberSharedContentState(key = "image"),
//                            animatedVisibilityScope = animatedVisibilityScope
//                        )
//                        .size(100.dp)
//                        .clip(CircleShape),
//                    contentScale = ContentScale.Crop
//                )
//                Text(
//                    text = "Bella", fontSize = 21.sp,
//                    modifier = Modifier.sharedBounds(
//                        rememberSharedContentState(key = "title"),
//                        animatedVisibilityScope = animatedVisibilityScope
//                    )
//                )
//            }
//        }
//    }
//
//
//    @OptIn(ExperimentalSharedTransitionApi::class)
//    @Composable
//    private fun DetailsContent(
//        modifier: Modifier = Modifier,
//        onBack: () -> Unit,
//        sharedTransitionScope: SharedTransitionScope,
//        animatedVisibilityScope: AnimatedVisibilityScope
//    ) {
//        Column(
//            modifier = Modifier
//                .padding(top = 200.dp, start = 16.dp, end = 16.dp)
//                .border(
//                    width = 1.dp,
//                    color = Color.Gray.copy(alpha = 0.5f),
//                    shape = RoundedCornerShape(8.dp)
//                )
//                .background(color = Color.LightGray, shape = RoundedCornerShape(8.dp))
//                .clickable {
//                    onBack()
//                }
//                .padding(8.dp)
//        ) {
//            with(sharedTransitionScope) {
//                Image(
//                    painter = painterResource(id = R.drawable.bella),
//                    contentDescription = "bella",
//                    modifier = Modifier
//                        .sharedElement(
//                            rememberSharedContentState(key = "image"),
//                            animatedVisibilityScope = animatedVisibilityScope
//                        )
//                        .size(200.dp)
//                        .clip(CircleShape),
//                    contentScale = ContentScale.Crop
//                )
//                Text(
//                    text = "Bella", fontSize = 28.sp,
//                    modifier = Modifier.sharedBounds(
//                        rememberSharedContentState(key = "title"),
//                        animatedVisibilityScope = animatedVisibilityScope
//                    )
//                )
//                Text(
//                    text = "转向新技术既困难又复杂, 而从最新技术重新开始则很容易. 这(据我观察)也是为什么稳定的大公司不会将其长期使用的应用程序迁移到新技术的最大原因之一, 除非它能带来惊人的利润.\n" +
//                            "你会发现大多数初创公司都在使用 Flutter, 这是因为 90% 以上的跨平台应用程序新创意都可以在Flutter中以经济高效的方式轻松实现. Flutter中的一切都非常快速, 令人惊叹, 而且具有我们在过去几年的Flutter之旅中听说过的所有令人惊叹的优点.\n" +
//                            "\n" +
//                            "作者：bytebeats\n" +
//                            "链接：https://juejin.cn/post/7299731886498349107\n" +
//                            "来源：稀土掘金\n" +
//                            "著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"
//                )
//            }
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//private fun SharedElement_ManualVisibleControl() {
//    var selectFirst by remember {
//        mutableStateOf(true)
//    }
//    val key = remember {
//        Any()
//    }
//    SharedTransitionLayout(
//        modifier = Modifier
//            .fillMaxSize()
//            .padding(10.dp)
//            .clickable { selectFirst = !selectFirst }
//    ) {
//        Box(
//            modifier = Modifier
//                .sharedElementWithCallerManagedVisibility(
//                    rememberSharedContentState(key = key),
//                    !selectFirst
//                )
//                .background(Color.Red)
//                .size(100.dp)
//        ) {
//            Text(if (!selectFirst) "false" else "true", color = Color.White)
//        }
//        Box(
//            modifier = Modifier
//                .offset(x = 180.dp, y = 180.dp)
//                .sharedElementWithCallerManagedVisibility(
//                    rememberSharedContentState(key = key),
//                    selectFirst
//                )
//                .alpha(alpha = 0.5f)
//                .background(color = Color.Blue)
//                .size(size = 180.dp)
//        ) {
//            Text(if (selectFirst) "true" else "false", color = Color.White)
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//private fun UnmatchedBoundsExample() {
//    var selectFirst by remember {
//        mutableStateOf(true)
//    }
//    val key = remember {
//        Any()
//    }
//    SharedTransitionLayout(
//        modifier = Modifier
//            .fillMaxSize()
//            .padding(10.dp)
//            .clickable { selectFirst = !selectFirst }
//    ) {
//        AnimatedContent(targetState = selectFirst, label = "AnimatedContent") { targetState ->
//            if (targetState) {
//                Box(
//                    modifier = Modifier
//                        .padding(12.dp)
//                        .sharedBounds(
//                            sharedContentState = rememberSharedContentState(key = key),
//                            animatedVisibilityScope = this@AnimatedContent
//                        )
//                        .border(width = 2.dp, color = Color.Red)
//                ) {
//                    Text(text = "Hello", fontSize = 20.sp)
//                }
//            } else {
//                Box(
//                    modifier = Modifier
//                        .offset(x = 180.dp, y = 180.dp)
//                        .sharedBounds(
//                            sharedContentState = rememberSharedContentState(key = key),
//                            animatedVisibilityScope = this@AnimatedContent
//                        )
//                        .border(width = 2.dp, color = Color.Red)
//                        .padding(all = 12.dp)
//                ) {
//                    Text(text = "Hello", fontSize = 36.sp)
//                }
//            }
//        }
//    }
//}
//
//private object UniqueKeySnippet {
//
//    data class SnackSharedElementKey(
//        val snackId: Long,
//        val origin: String,
//        val type: SnackSharedElementType
//    )
//
//    enum class SnackSharedElementType {
//        Bounds,
//        Image,
//        Title,
//        Tagline,
//        Background
//    }
//
//    @OptIn(ExperimentalSharedTransitionApi::class)
//    @Composable
//    fun SharedElementUniqueKey() {
//        SharedTransitionLayout {
//            AnimatedVisibility(visible = true) {
//                Box(
//                    modifier = Modifier.sharedElement(
//                        state = rememberSharedContentState(
//                            key = SnackSharedElementKey(
//                                snackId = 1,
//                                origin = "latest",
//                                type = SnackSharedElementType.Image
//                            )
//                        ),
//                        animatedVisibilityScope = this@AnimatedVisibility
//                    )
//                )
//            }
//        }
//    }
//}
//
//
